<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）： */
        img.home {
            /* 宽度：46px;高度：44px; - 定义我们使用的那部分图像 */
            width: 46px;
            height: 44px;
            /* background:url('images/img_navsprites.gif') 0 0; - 定义背景图像和它的位置（左0px，顶部0px） */
            background: url('images/img_navsprites.gif') 0 0;
        }

        img.next {
            width: 43px;
            height: 44px;
            background: url('images/img_navsprites.gif') -91px 0;
        }
    </style>
</head>

<body>
    <!-- <img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。
        显示的图像将是我们在CSS中指定的背景图像 -->
    <img class="home" src="images/img_trans.gif"><br><br>
    <img class="next" src="images/img_trans.gif">

</body>

</html>
<!-- 图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。 -->